<template>
  <div class="list">  
     <div>
     	<div class="search_list">
     		<ul>
     		  <router-link :to="'/category/'+item.id" tag="li" @click.native='ListHandler(index)' :class="{actives:nowclick===index}" v-for="(item,index) in classification" :key="index">
               <i :class="item.class"></i>
               <span>{{ item.title }}</span>
              </router-link>
     		</ul>
     	</div>
     	<div class="search_list_right">
     		<router-view />
     	</div>
     </div>
  </div>
</template>

<script>
   import "../assets/icon_img/iconfont.css"

export default {
  name: 'InputRouter',
   data(){
   	return {
         nowclick:0,
       classification:[
        {
          title:"行业分类",
          id:"industry",
          class:"iconfont icon-gongjuxiang"
        },
        {
          title:"热度排行",
          id:"hot",
          class:"iconfont icon-xiangshangjiantou"
        },
        {
          title:"发展前景",
         id:"development",
         class:"iconfont icon-huojian"
        },
        {
          title:"学历要求",
          id:"education",
          class:"iconfont icon-shu"
        },
        {
          title:"收入排行",
          id:"income",
          class:"iconfont icon-tiaoxingtu"
        }
       ]
   	}
   },
    methods:{
         ListHandler(index){
              // console.log(index)
              this.nowclick=index
         }
       }
}
</script>

<style lang="less" scoped>
    .list{
    	width: 100%;
    	background-color: rgba(255,255,255);
    	div{
    		width: 100%;
    		overflow: hidden;
           .search_list{
           	width:115px;
           	height:540px;
           	background-color:rgba(247,246,246);
           	float:left;
           	ul{ 
           		width: 115px;
           		height: 100%;
           		li{
                   width:100%;
                   height:50px;
                   line-height:50px;
                   span{
                   	  margin-left:3px
                   }
                   i{
                   	 margin-left:10px;
                   	 font-size:20px
                   }
           		}
           		.actives{
           			background-color: rgba(255,255,255);
           			color:rgba(63,178,253);
           		}
           	}
           }
           .search_list_right{
           	 width: 255px;
           	 height: 540px;
             float: right;
           }
    	}
    }
     

</style>
